<template>
  <div class="content">
    <!-- 搜索按钮操作 -->
    <div class="elTable">
      <!-- 表格 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.label"
          :label="tab.label"
          :name="tab.label"
        >
          <div class="tabInfo">
            <div class="search">
              <SearchForm
                :formObj="formObj"
                :formData="searchForm"
                :tip="tip"
                @handleAdd="handleAddView"
              ></SearchForm>
            </div>
            <TabTable
              class="tabTable"
              :isApproval="tab.label == '处理中' ? true : false"
              :isShowBtn="tab.label == '草稿' ? true : false"
              :tableData="noteTableData"
              :pagination="pagination"
              @handleEdit="handleEditView"
              @handleWork="handleWorkView"
              @handleInfo="handleInfoView"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
              @handleDelete="handleDelete"
            ></TabTable>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import TabTable from "../components/tabTable.vue";
import SearchForm from "@/components/searchForm/index.vue";
import {
  needWorkersList,
  seachPersonList,
  deleteNeedWorkers,
} from "@/api/recruitment/needWorkers/index.js";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import { onMounted, reactive, getCurrentInstance, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
// 申请人
const requireProposerOptions = reactive([]);
const buIdOptions = reactive([]);
const formObj = reactive({
  item: [
    {
      select: true,
      label: "",
      prop: "requireProposerName",
      placeholder: "请选择需求申请人",
      disabled: false,
      options: requireProposerOptions,
      change: (value) => {
        requireProposerChange(value);
      },
    },
    {
      select: true,
      label: "",
      prop: "requireDeptId",
      placeholder: "请选择需求部门",
      disabled: false,
      options: buIdOptions,
    },
  ],
  btn: [
    {
      type: "primary",
      name: "搜索",
      className: "el-button-primary",
      clickFun: () => {
        handleQuery();
      },
    },
    {
      type: "primary",
      name: "重置",
      className: "el-button-primary",
      clickFun: () => {
        resetTabState();
      },
    },
  ],
});

const router = useRouter();
// 初始搜索表单数据
const initialSearchForm = {
  requireDeptId: "",
  requireProposerName: "",
  status: [1],
  flowKey: "RECRUIT_DEMAND",
  pageSize: 10,
  pageNum: 1,
};

const searchForm = reactive({ ...initialSearchForm });
// 初始状态1草稿 2,201处理 中 1000审批完成
const tipVal = ref();

// 标签页
const activeName = ref("草稿");
// 查看切换
const tip = ref("草稿");

// 标签页数据
const tabs = reactive([
  {
    label: "草稿",
  },
  {
    label: "处理中",
  },
  {
    label: "审批完成",
  },
]);
watch(activeName, (newVal) => {
  console.log(newVal, "newVal");
  if (newVal == "草稿") {
    searchForm.status = [1];
  } else if (newVal == "处理中") {
    searchForm.status = [2, 201];
  } else if (newVal == "审批完成") {
    searchForm.status = [1000];
  }
  resetTabState();
});
// 数据
const noteTableData = ref([]);

const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

// 重置搜索表单、表格数据和分页信息
const resetTabState = () => {
  searchForm.requireDeptId = initialSearchForm.requireDeptId;
  searchForm.requireProposerName = initialSearchForm.requireProposerName;
  searchForm.pageSize = initialSearchForm.pageSize;
  searchForm.pageNum = initialSearchForm.pageNum;
  noteTableData.value = [];
  pagination.value = {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  };
  getList();
};

// 切换标签页
const handleClick = (tab) => {
  const tipMap = new Map([
    ["草稿", [1]],
    ["处理中", [2, 201]],
    ["审批完成", [1000]],
  ]);

  tip.value = tab.props.name;
  tipVal.value = tipMap.get(tip.value) || tipVal.value;
  // 重置状态
  // resetTabState();
};

onMounted(() => {
  getDemandDetailsList();
  getList();
  seachPersonsList();
});
// 新增
const handleAddView = () => {
  router.push({
    name: "addNeedPerson",
    query: {
      edit: 0,
    },
  });
};
// 编辑
const handleEditView = (row) => {
  router.push({
    name: "addNeedPerson",
    query: {
      id: row.id,
      edit: 1,
      status: row.status,
    },
  });
};
// 查看
const handleInfoView = (row) => {
  if (tip.value == "草稿") {
    router.push({
      name: "needPersonView",
      query: {
        id: row.id,
        info: 1,
      },
    });
  } else {
    router.push({
      name: "needPersonView",
      query: {
        id: row.id,
        info: 0,
      },
    });
  }
};
// 审批
const handleWorkView = (row) => {
  router.push({
    name: "needPersonWork",
    query: {
      id: row.id,
      workFlow: "1",
      examine: 1,
    },
  });
};
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm("是否要删除这条用人需求申请?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await deleteNeedWorkers(row.id);
      if (res.data == true) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getList();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
// 申请人
const seachPersonsList = async () => {
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      requireProposerOptions.push({
        label,
        value,
      });
    });
  }
};
// 申请人
const requireProposerChange = (val) => {
  requireProposerOptions.forEach((item) => {
    if (val == item.value) {
      searchForm.requireProposerName = item.label;
    }
  });
};
const getDemandDetailsList = async () => {
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};
// 获取用人申请列表
const getList = () => {
  noteTableData.value = [];
  needWorkersList(searchForm).then((res) => {
    if (res.rows.length > 0) {
      noteTableData.value = res.rows;
      console.log(" noteTableData.value", noteTableData.value);

      pagination.value.total = res.total;
    } else {
      noteTableData.value = [];
      pagination.value.total = 0;
    }
  });
};
const handleQuery = () => {
  getList();
};

const sizeChange = (size) => {
  searchForm.pageNum = 1;

  searchForm.pageSize = size.limit;
  pagination.value.page = 1;
  pagination.value.limit = size.limit;

  getList();
};
const currentChange = (page) => {
  searchForm.pageNum = page.page;
  searchForm.pageSize = pagination.value.limit;
  pagination.value.page = page.page;
  getList();
};
</script>

<style lang="scss" scoped></style>
